<script lang="ts" setup>
import PublicForm from "@/components/element-plus/PublicForm.vue";
import { FormRules } from "element-plus";
import { reactive } from "vue";
import { Apple, Cherry, Grape, Orange, Pear, Watermelon } from "@element-plus/icons-vue";
import { ElementColumsType } from "#/element-plus";

// 表单的 value
const form = reactive({
	input: "",
	selectRadio: "",
	selectCheckbox: [] as string[],
	switch: false,
	segmented: "",
	checkbox: [],
	radio: "",
	desc: "",
});

// 表单效验
const rules = reactive<FormRules<typeof form>>({
	input: [
		{ required: true, message: "请输入正确的名字。", trigger: "blur" },
		{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
	],
	selectRadio: [
		{
			required: true,
			message: "请选择对应的地址。",
			trigger: "change",
		},
	],
	selectCheckbox: [
		{
			required: true,
			message: "请选择number",
			trigger: "change",
		},
	],
	segmented: [
		{
			required: true,
			message: "请选择你要的水果",
			trigger: "change",
		},
	],
	checkbox: [
		{
			type: "array",
			required: true,
			message: "请选择地址1",
			trigger: "change",
		},
	],
	radio: [
		{
			required: true,
			message: "请选择地址2",
			trigger: "change",
		},
	],
	desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
});

// #region 用法 1 ：form 表单
const formColums: ElementColumsType<typeof form>[] = [
	{
		type: "input",
		label: "input",
		prop: "input",
		payload: {
			type: "primary",
			placeholder: "请输入用户名",
			className: "!w-120",
			clearable: true,
		},
	},
	{
		type: "select",
		label: "select 单选",
		prop: "selectRadio",
		payload: {
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-120",
			clearable: true,
			// size: "small",
			options: [
				{ label: "南京", value: "1", id: "1" },
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "select",
		label: "select 多选",
		prop: "selectCheckbox",
		payload: {
			checkAllTitle: "全选/全不选",
			indeterminate: false,
			type: "primary",
			multiple: true,
			placeholder: "请输入地址",
			className: "!w-200",
			clearable: true,
			// size: "small",
			collapseTags: true,
			collapseTagsTooltip: true,
			options: [
				{ label: "南京", value: "1", id: "1" },
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "switch",
		label: "switch 开关",
		prop: "switch",
		payload: {
			type: "primary",
			className: "!w-120",
		},
	},
	{
		type: "segmented",
		label: "segmented 分段控制器",
		prop: "segmented",
		payload: {
			options: [
				{
					label: "Apple",
					value: "Apple",
					icon: Apple,
				},
				{
					label: "Cherry",
					value: "Cherry",
					icon: Cherry,
				},
				{
					label: "Grape",
					value: "Grape",
					icon: Grape,
				},
				{
					label: "Orange",
					value: "Orange",
					icon: Orange,
				},
				{
					label: "Pear",
					value: "Pear",
					icon: Pear,
				},
				{
					label: "Watermelon",
					value: "Watermelon",
					icon: Watermelon,
				},
			],
		},
	},
	{
		type: "checkbox",
		label: "checkbox 多选",
		prop: "checkbox",
		payload: {
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-120",
			clearable: true,
			// size: "small",
			options: [
				{ label: "南京", value: "1", id: "1" },
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "radio",
		label: "radio 单选",
		prop: "radio",
		payload: {
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-120",
			clearable: true,
			// size: "small",
			options: [
				{ label: "南京", value: "1", id: "1" },
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "input",
		label: "input",
		prop: "desc",
		payload: {
			type: "textarea",
			placeholder: "请输入用户名",
			clearable: true,
		},
	},
	{
		type: "button",
		payload: {
			list: ["submit", "reset"],
		},
	},
];
// #endregion

// #region 用法 2：筛选框，需要在组件上添加 属性 class="inline-flex gap-10"
// const formColums: ElementColumsType<typeof form>[] = [
// 	{
// 		type: "input",
// 		tooltip: {
// 			content: "input",
// 		},
// 		prop: "input",
// 		payload: {
// 			type: "primary",
// 			placeholder: "请输入用户名",
// 			className: "!w-120",
// 			clearable: true,
// 		},
// 	},
// 	{
// 		type: "select",
// 		tooltip: {
// 			content: "select 单选",
// 		},
// 		prop: "selectRadio",
// 		payload: {
// 			type: "primary",
// 			placeholder: "请输入地址",
// 			className: "!w-120",
// 			clearable: true,
// 			// size: "small",
// 			options: [
// 				{ label: "南京", value: "1", id: "1" },
// 				{ label: "北京", value: "2", id: "2" },
// 				{ label: "上海", value: "3", id: "3" },
// 			],
// 		},
// 	},
// 	{
// 		type: "select",
// 		tooltip: {
// 			content: "select 多选",
// 		},
// 		prop: "selectCheckbox",
// 		payload: {
// 			checkAllTitle: "全选/全不选",
// 			indeterminate: false,
// 			type: "primary",
// 			multiple: true,
// 			placeholder: "请输入地址",
// 			className: "!w-200",
// 			clearable: true,
// 			// size: "small",
// 			collapseTags: true,
// 			collapseTagsTooltip: true,
// 			options: [
// 				{ label: "南京", value: "1", id: "1" },
// 				{ label: "北京", value: "2", id: "2" },
// 				{ label: "上海", value: "3", id: "3" },
// 			],
// 		},
// 	},
// ];
// #endregion
</script>

<template>
	<PublicForm v-model:form="form" v-model:formColums="formColums" :rules="rules" />
</template>
